﻿@{
    ViewBag.Title = "首页";
    Layout = "~/views/shared/_Layout.cshtml";
}
@section Header
{
    <script src="~/Scripts/js/vue.js"></script>
    <script src="~/Scripts/js/axios.min.js"></script>
}
<style>
    /* Make the image fully responsive */
    .carousel-inner img {
        width: 100%;
        height: 100%;
    }
</style>

<div id="lunbo" class="carousel slide" data-ride="carousel">
    <!-- 指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="~/Content/image/homeLunbo/img_fjords_wide.jpg" />
        </div>
        <div class="carousel-item">
            <img src="~/Content/image/homeLunbo/img_nature_wide.jpg" />
        </div>
        <div class="carousel-item">
            <img src="~/Content/image/homeLunbo/img_mountains_wide.jpg" />
        </div>
    </div>
    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#lunbo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#lunbo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
<div style="margin-top: 25px">
    <div class="container mt-3">
        <h6 class="">广告</h6>
        <div class="media border p-3">
            <img src="../Content/image/ad.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width: 60px;">
            <div class="media-body">
                <h4>XXXXXXX</h4>
                <p>学的不仅是技术，更是梦想！！！</p>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <br>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div id="home" class="container tab-pane active">
            <br>
            <h3>HOME</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="menu1" class="container tab-pane fade">
            <br>
            <h3>Menu 1</h3>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div id="menu2" class="container tab-pane fade">
            <br>
            <h3>Menu 2</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
    </div>
</div>
<div id="app">
    <div class="row" style="margin-top: 50px; background-color: #F7F6F6; padding-top: 20px;">
        <testtop title="独测排行榜">

        </testtop>
        <div class="col-md-4">
            <table class="table table-striped table-bordered  text-center">
                <thead class="bg-white">
                    <tr>
                        <th>活跃排行榜</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(i,index) in UHYinfo" :key="i.RealUserName">

                        <td>{{ index+1 }}-{{ i.RealUserName }}<span class='badge badge-pill badge-primary'>{{ i.Score }}活跃度</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-4">
            <table class="table table-striped table-bordered  text-center">
                <thead class="bg-white">
                    <tr>
                        <th>XX排行榜</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>



<template id="topList">
    <div class="col-md-4">
        <table class="table table-striped table-bordered  text-center">
            <thead class="bg-white">
                <tr>
                    <th>{{title}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-if="serrored">
                    <td v-if="loading">加载中.....</td>
                    <td>加载失败</td>
                </tr>
                <tr v-for="(i,index) in SScoreAvgInfo" :key="i.RealUserName">
                    <td style="padding:10px 20px 10px 20px;">
                        <!--上左下右-->
                        <span class="badge badge-pill float-left badge-info">{{ index+1 | top3Format}}</span>
                        {{ i.RealUserName }}<span class='badge badge-pill badge-success float-right'>{{ i.Number}}分</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

@section footer
{

    <script>
        Vue.component('testtop', {
            template: '#topList',
            props: ['title'],
            data: function () {
                return {
                    SScoreAvgInfo: null,
                    UHYinfo: null,
                    loading: true,
                    serrored: false,
                    classStr: null
                }
            },
            mounted() {
                axios.get('GetSScoreAvg')
                    .then(response => {
                        this.SScoreAvgInfo = response.data
                    })
                    .catch(error => {
                        console.log(error)
                        this.serrored = true
                    })
                    .finally(() => this.loading = false),

                axios
                    .get('GetUHYinfo')
                    .then(response => {
                        this.UHYinfo = response.data
                    }).catch(error => {
                        console.log(error)
                        this.errored = true
                    })
                    .finally(() => this.loading = false)
            },
            filters: {
                top3Format: function (value) {
                    if (value <= 3) {
                        classStr = "badge badge-pill float-left badge-info";
                        return value;
                    }
                }
            }
        })





        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    UHYinfo: null,
                    loading: true,
                    errored: false,
                }
            },
            filters: {
                formatScore(value) {
                    // var str = " <span class='badge badge-pill badge-primary'>" + value + "<span>";
                    return value;
                },

            },
            mounted() {

                axios
                    .get('GetUHYinfo')
                    .then(response => {
                        this.UHYinfo = response.data
                    }).catch(error => {
                        console.log(error)
                        this.errored = true
                    })
                    .finally(() => this.loading = false)

            }
        })
    </script>

}



@*
            Vue.component('GetSScoreAvg', {
                template: '#getsscoreavg'，
                data: function () {
                    return {
                        SScoreAvgInfo: null,
                        loading: true,
                        serrored: false,
                        classStr: null
                    }
                },
                filters: {
                    top3Format: function (value) {
                        if (value <= 3) {
                            vm.classStr = "badge badge-pill float-left badge-info";
                            return value;
                        }
                    }
                },
                mounted() {
                    axios
                        .get('GetSScoreAvg')
                        .then(response => {
                            this.SScoreAvgInfo = response.data
                        })
                        .catch(error => {
                            console.log(error)
                            this.serrored = true
                        })
                        .finally(() => this.loading = false),
                                        }

            }）
    **@